<template>
  <el-dialog :title="formData.id?'编辑角色':'新增角色'" :visible="showDialog" @close="closeFn">
    <el-form ref="form" :model="formData" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="formData.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="formData.description" autocomplete="off" @keyup.enter.native="confirmFn" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="confirmFn">确 定</el-button>
    </div>
  </el-dialog>

</template>
<script>
import { addRole, getRoleDetailById, updateRole } from '@/api/setting'
export default {
  props: {
    showDialog: { // props中的数据是只读，如果子组件直接修改会造成父子父组件数据不一致（单向数据流）
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '角色名称在1至4位', trigger: 'blur' }],
        description: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    closeFn() {
    //   this.showDialog = false
      // 子传父
    //   this.$emit('closeEvent')
    // 上面这种方式修改数据，非常不方便，父组件中必须绑定这个事件才行
    // 有没有一种方式可以直接在子组件修改父组件中的数据呢？
    // 答：有的，这里我们要学习一个新的修饰符，.sync
    // 那这个修饰符如何使用呢？如何生效呢？
    // 答：使用语法：
    /**
     * 1、父组件中，在父传子 绑定属性的时候添加这个修饰符
     * 2、子组件中，子传父的代码必须要通过以下语法来实现
     *      this.$emit('update:props中的变量名', 要修改的值 )
     * */
      this.$emit('update:showDialog', false) // 就是把false的值同步给父组件中的visibleDialog
      //   清空表单数据
      this.formData = {
        name: '',
        description: ''
      }
      //   清空校验规则  -- 也能清空内容（但是只能清空绑定在表单中属性的值）
      this.$refs.form.resetFields()
    },
    async confirmFn() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        await updateRole(this.formData)
      } else {
        await addRole(this.formData)
      }
      this.closeFn()
      this.$emit('updateEvent')
    },
    async getRoleDetailById(id) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.formData = await getRoleDetailById(id)
      loading.close()
    }
  }
}
</script>

<style>
.is-fullscreen {
  z-index: 2090 !important;
}
</style>
